    // 1.获取页面元素 getElements,获取所有的span元素
    var spans=document.querySelectorAll('.swiperidx li span');
    var swiperLis=document.querySelectorAll('.swiper li');
    var messageImages=document.querySelectorAll('.message-images li');
    var messageSwiperSpans=document.querySelectorAll('.message-idx li span');

    var slideshow = document.querySelector('.slideshow');

    var cnt=0;
    var cnt2=0;
    // 自动播放函数，使其达到自动播放效果
    function auto1(){
        cnt++;
        cnt=cnt%4;
        var index=cnt;
        for(let i=0;i<spans.length;i++){
            if(i==index){
                spans[i].classList.add('active');
                swiperLis[i].className="swiper-active";
            }else{
                spans[i].classList.remove('active');
                swiperLis[i].className="";
            }
        }
    }
    function auto2(){
        cnt2++;
        cnt2=cnt2%6;
        var index=cnt2;
        for(let i=0;i<messageSwiperSpans.length;i++){
            if(i==index){
                messageSwiperSpans[i].classList.add('message-idx-active');
                messageImages[i].className='message-active';
            }else{
                messageSwiperSpans[i].classList.remove('message-idx-active');
                messageImages[i].className='';
            }
        }
    }
    //获取所有的
    //处理业务逻辑
    for(let index=0;index<spans.length;index++){
        
        spans[index].addEventListener('mouseover',function(){
            for(let i=0;i<spans.length;i++){
                if(i==index){
                    spans[i].className='active';
                    swiperLis[i].className="swiper-active";
                }else{
                    spans[i].className='';
                    swiperLis[i].className="";
                }
            }
        })
    }
    //每隔3秒自动更新，更新img的路径
    setInterval(auto1,3000);
    setInterval(auto2,3000);


    for(let index=0;index<messageSwiperSpans.length;index++){
        
        messageSwiperSpans[index].addEventListener('click',function(){
            for(let i=0;i<messageSwiperSpans.length;i++){
                if(i==index){
                    messageSwiperSpans[i].classList.add('message-idx-active');
                    messageImages[i].className='message-active';
                }else{
                    messageSwiperSpans[i].classList.remove('message-idx-active');
                    messageImages[i].className='';
                }
            }
          
        })
    }
    function stopAnimation() {
        slideshow.style.animationPlayState = 'paused';
      }
    
      function startAnimation() {
        slideshow.style.animationPlayState = 'running';
      }
